import { Cell, Label, Legend, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { PassedDonutTooltip } from "./tooltip";

interface PassedDonutPayload {
  status: string;
  value: number;
  color: string;
}

const data: PassedDonutPayload[] = [
  { status: "passed", value: 92.05, color: "--chart-1" },
  { status: "failed", value: 0, color: "--chart-2" },
  { status: "skipped", value: 2, color: "--chart-3" },
  { status: "broken", value: 5, color: "--chart-4" },
  { status: "unknown", value: 0.95, color: "--chart-5" },
];

export function PassedDonutChart() {
  const cells = () => data.map((entry) => <Cell key={entry.status} fill={`var(${entry.color})`} />);
  return (
    <Card className="gap-2 xl:py-4 2xl:py-6">
      <CardHeader className="xl:px-4 2xl:px-6">
        <CardTitle className="text-sm">Average passed rate</CardTitle>
      </CardHeader>
      <CardContent className="h-full gap-2 xl:px-4 2xl:px-6">
        <ResponsiveContainer width="100%" height="100%" debounce={200}>
          <PieChart>
            <Pie
              data={data}
              dataKey="value"
              nameKey="status"
              cx="50%"
              cy="50%"
              innerRadius="70%"
              outerRadius="90%"
              paddingAngle={0}
              stroke="none"
            >
              {cells()}
              <Label
                value={`${data[0].value.toLocaleString()} %`}
                position="center"
                style={{ fontSize: "16px", fontWeight: "bold", fill: "var(--primary)" }}
              />
            </Pie>
            <Legend
              layout="vertical"
              align="right"
              verticalAlign="middle"
              wrapperStyle={{
                right: 0,
                top: "50%",
                transform: "translateY(-50%)",
                fontSize: "10px",
                textTransform: "uppercase",
              }}
            />
            <Tooltip content={<PassedDonutTooltip />} />
          </PieChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  );
}
